import React, { Component } from 'react'
import axios from 'axios'

export default class index extends Component {
  search = () => {
    // console.log(this.keywordNode.value)
    const {
      keywordNode: { value: keyword }
    } = this

    // 发生请求前通知App组件更新状态
    this.props.updateAppState({
      isLoading: true,
      isFirst: false
    })

    axios.get(`/api/search/users?q=${keyword}`).then(
      response => {
        console.log('成功', response.data)
        // this.props.saveUsers(response.data.items)
        this.props.updateAppState({
          isLoading: false,
          users: response.data.items
        })
      },
      error => {
        console.error(error)
        this.props.updateAppState({
          isLoading: false,
          err: error.message
        })
      }
    )
  }

  render() {
    return (
      <div className="container">
        <section className="jumbotron">
          <h3 className="jumbotron-heading">Search Github Users</h3>
          <div className="row">
            <div className="col">
              <input
                className="form-control"
                ref={e => (this.keywordNode = e)}
                type="text"
                placeholder="enter the name you search"
              />
            </div>
            <div className="col">
              <button className="btn btn-primary" onClick={this.search}>
                Search
              </button>
            </div>
          </div>
        </section>
      </div>
    )
  }
}
